<template>
    <div class="pag_city">
        <van-nav-bar title="当前城市 - " left-text="返回" left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon name="cross" size="18" />
            </template>
        </van-nav-bar>

        <form action="/">
            <van-search v-model="cityKey" show-action placeholder="输入城市名或拼音" @update:model-value="onSearch"
                @cancel="onCancel" />
        </form>

        <!-- 热门城市 -->
        <div class="hotCity" v-if="isShowHotcity">
            <span>热门城市</span>
            <ul>
                <li v-for="item in cityHot" @click="handerList(item.cityId, item.name)">{{ item.name }}</li>
            </ul>
        </div>

        <ul v-if="isShowUl" class="reCity">
            <li v-for="item in reCity" @click="handerList(item.cityId, item.name)">{{ item.name }}</li>
        </ul>

        <van-index-bar :index-list="indexList" v-if="isShow">
            <!-- 插槽渲染 -->
            <template v-for="(value, key) in sortCity">
                <van-index-anchor :index=key />
                <van-cell v-for="list in value" :title="list.name" @click="handerList(list.cityId, list.name)" />
            </template>
            <!-- 插槽渲染 -->
        </van-index-bar>
    </div>
</template>

<style scoped>
.hotCity {
    padding: 0 15px;
}

.hotCity ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hotCity ul li {
    border-radius: 3px;
    margin: 7px;
    font-size: 14px;
    height: 35px;
    line-height: 35px;
    color: #191a1b;
    background-color: #f4f4f4;
    padding: 0 35px;
    box-sizing: border-box;

}

.hotCity span {
    font-size: 13px;
    color: #797d82;
    margin-bottom: 15px;
}

reCity ul {
    width: 100%;
    margin-top: 105px;
    padding: 0 25px;
}

li {
    height: 44px;
    line-height: 44px;
    color: #191a1b;
    font-size: 13px;
    border-bottom: 1px solid #ededed;
    padding: 5px 10px;
}
</style>

<script setup>

import { userStore } from '@/stores/user'
import { useRouter } from "vue-router"

import { ref, onMounted } from "vue";
import { getCity } from "@/api/mm"

const isShowUl = ref(false)
const isShow = ref(true)
const isShowHotcity = ref(true)

const cityKey = ref("")
const cityAll = ref([])
const cityHot = ref([])
const sortCity = ref({})
const indexList = ref([])
const router = useRouter()
const reCity = ref([])

const onClickLeft = () => {
    history.back()
}

const store = userStore()

const handerList = (cityId, cityName) => {
    console.log("修改城市id为:", cityId);
    store.cityId = cityId
    store.cityName = cityName
    router.push("/cinemas")
}

const onCancel = () => {
    router.push("/cinemas")
}

const onSearch = (value) => {
    if (value) {
        isShowUl.value = true
        isShow.value = false
        isShowHotcity.value = false
        reCity.value = cityAll.value.filter((item) => {
            return item.name.includes(value) || item.pinyin.includes(value.toLowerCase())
        })
    } else {
        isShow.value = true
        isShowUl.value = false
        isShowHotcity.value = true
    }
}

onMounted(() => {
    fetchdata()
})

const fetchdata = async () => {
    // 获取未排序的城市数组
    cityAll.value = (await getCity()).data.cities;
    cityHot.value = cityAll.value.filter((item) => item.isHot == 1)
    console.log(cityAll.value);

    // 调用getPin，得到排序后的对象数组：sortCity
    getPin();
}

/* 传入一个字母，返回对应字母的城市 */
const getCityBypin = (pin) => {
    return cityAll.value.filter((item) => item.pinyin.slice(0, 1).includes(pin.toLowerCase()))
}

/* 排序键值对城市 */
const getPin = () => {
    /* 生成26个大写字母 ABCDEFG..... */
    for (var i = 65; i < 90; i++) {
        /* 遍历字母 */
        const pin = String.fromCharCode(i)
        if (getCityBypin(pin).length > 0) {
            /* 如果找到了对应的城市，添加键值对 */
            sortCity.value[pin] = getCityBypin(pin)
            indexList.value.push(pin)
        }
    }
}

</script>